<template>
  <el-drawer v-model="drawer" title="" :with-header="false" size="80%">
    <div
      class="py-[13px] px-[16px] flex items-center justify-between border-b border-solid border-[#E8E8E8]"
    >
      <span class="text-[18px] font-bold">详情</span>
      <el-icon @click="drawer = false" class="cursor-pointer"
        ><Close
      /></el-icon>
    </div>
    <div class="px-[40px] pb-[32px] tableLine">
      <div class="flex items-center justify-end mt-[24px] mb-[20px]">
        <Button type="primary" class="ml-[16px]">导出</Button>
      </div>
      <el-table
        border
        align="left"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px; height: 100%"
        row-key="id"
      >
        <el-table-column type="index" label="序号" width="65" />
        <el-table-column prop="originalName" label="原始文件名称" width="440" />
        <el-table-column prop="originalPath" label="文件位置" width="360" />
        <el-table-column prop="infoId" label="数据数量" width="180" />
        <el-table-column prop="fileStatus" label="解析状态" width="180">
          <template #default="{ row }">
            <div class="flex items-center">
              <div
                :class="`${row.fileStatus == '2' ? 'fail' : 'sussess'}`"
              ></div>
              <span>{{ row.fileStatus == "2" ? "解密失败" : "成功" }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="上传时间" width="256">
          <template #default="{ row }">{{ getDate(row.createdTime) }}</template>
        </el-table-column>
        <template #empty>
          <el-empty description="无查询结果" />
        </template>
      </el-table>
      <page
        class="place-self-end"
        :options="options"
        :change="change"
        :handleSizeChange="handleSizeChange"
      ></page>
    </div>
  </el-drawer>
</template>
  <script setup>
import dayjs from "dayjs";
import { onMounted } from "vue";
const drawer = ref(false);
// const caseId = ref("");
// const selectId = ref("");
const options = reactive({
  total: 0,
  pageSize: 10,
  pageNum: 1,
});
const { detailId } = defineProps({
  detailId: {
    type: String,
    default: "",
  },
});
const tableData = ref([]);
// 每页显示个数切换
const handleSizeChange = (value) => {
  options.pageSize = value;
  queryList();
};
// 页码切换
const change = (val) => {
  options.pageNum = val;
  queryList();
};
// tab切换
const onTabClick = (item) => {
  selectId.value = item.id;
  options.pageNum = 1;
  options.pageSize = 10;
  queryList();
};
const onOpen = () => {
  drawer.value = true;
};
// 获取数据列表
const queryList = async () => {
  let [err, res] = await api.getFileList({
    caseId: "436e05dd1a24464f80ffb702c01370f7",
    pageNumber: options.pageNum,
    pageSize: options.pageSize,
    isPage: 0,
    fileStatus: "",
  });
  if (err) return;
  tableData.value = res.data.records;
  options.total = res.data.total;
};
const getDate = (value) => {
  return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
};
watch(
  () => detailId,
  (val, old) => {
    console.log(detailId, "caseId0000");
    queryList();
    // getTotal();
  }
  // { immediate: true }
);
defineExpose({
  onOpen,
});
</script>
  <style lang="scss" scoped>
.tableLine {
  flex: 1;
  display: flex;
  flex-direction: column;
}
:deep(.el-drawer__body) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
}
.dataItem {
  cursor: pointer;
  margin-right: 12px;
  padding: 4px 16px;
  border: 1px solid rgba(221, 221, 221, 1);
  border-radius: 4px;
  background: rgba(255, 255, 255, 1);
  &.active {
    border: none;
    color: #fff;
    background: rgba(26, 102, 255, 1);
  }
}
.dataItem:last-of-type {
  margin-right: 0;
}
.sussess {
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: rgba(19, 194, 49, 1);
}
.fail {
  margin-right: 8px;
  width: 10px;
  height: 10px;
  border-radius: 20px;
  background: rgba(224, 27, 43, 1);
}
</style>
  
  